<template>
  <div>
    <div class="box">
      <div class="header">
        <!-- <router-link
          tag="div"
          to="/userInfo"
          class="left iconfont icon-hanbaocaidan413"
        ></router-link> -->
        <div class="left iconfont icon-hanbaocaidan413" @click="goUserInfo"></div>
        <div class="center" style="font-size:20px"></div>
        <router-link
          tag="div"
          class="right iconfont icon-sousuo413"
          to="/recommend/search"
        ></router-link>
      </div>

      <div class="navs">
        <router-link to="/recommend" class="item" tag="div"><span>推荐</span></router-link>
        <router-link to="/rank" class="item" tag="div"><span>排行</span></router-link>
        <router-link to="/singer" class="item" tag="div"><span>歌手</span></router-link>
        <router-link to="/newMv" class="item" tag="div"><span>MV</span></router-link>
        <router-link to="radio" class="item" tag="div"><span>电台</span></router-link>
      </div>
    </div>
    <div class="occupy"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods:{
    goUserInfo(){
      // if(this.$store.state.login){
          this.$router.push("/userInfo")
      // }else{
          // this.$router.push("recommend")
          console.log(this.$store.state.login)
      // }
    }
  },
}
</script>

<style lang="less">
@headerHeight: 0.984375rem;
@navHeight:1.140625rem;
.occupy{
  width:100%;
  height: @headerHeight + @navHeight;
}
.box{
  z-index: 100;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  // height: 80px;

}
.header {
  height: @headerHeight;
  display: flex;
  background-color: #d4473c;
  color: #fff;
  text-align: center;
  .left {
    flex: 0 0 1.25rem;
    line-height: @headerHeight;
  }
  .center {
    flex: 1;
    line-height: @headerHeight;
    font-size: 0.375rem;
  }
  .right {
    flex: 0 0 1.25rem;
    line-height: @headerHeight;
  }
  .iconfont {
    font-size: 30px;
  }
}
// .navs {
//   display: flex;
//   color: #fff;
//   background-color: #d4473c;
//   .item {
//     font-size: 0.5rem;
//     height: @navHeight;
//     flex: 1;
//     text-align: center;
//     span {
//       margin-top: 0.359375rem;
//       height: 0.515625rem;
//       line-height: 0.515625rem;
//       display: inline-block;
//       border-bottom: 2px solid transparent;
//     }
//     &.router-link-active span {
//       font-weight: bold;
//       border-color: #fff;
//     }
//   }
// }
.navs::-webkit-scrollbar {
  display: none;
}
.navs {
  color: #fff;
  background-color: #d4473c;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
  .item {
    font-size: 0.5rem;
    height: @navHeight;
    // width: 200px;
    padding: 0px 50px;
    text-align: center;
    flex-shrink: 0;
    span {
      margin-top: 0.359375rem;
      height: 0.515625rem;
      line-height: 0.515625rem;
      display: inline-block;
      border-bottom: 2px solid transparent;
    }
    &.router-link-active span {
      font-weight: bold;
      border-color: #fff;
    }
  }
}
</style>
